/**
 * 获取频道
 */
import './index.css'
import axios from '@/utils/request.js'
import '@/utils/auth.js'

axios({
  url: '/v1_0/channels'
})
  .then((res) => {
    document.querySelector('#channel').innerHTML =
      `<option value="">请选择文章频道</option>` +
      res.data.channels
        .map(
          (item) => `
    <option value="${item.id}">${item.name}</option>
  `
        )
        .join('')
  })
  .catch((err) => {})

let total_count = 0
let queryStr = {
  status: '',
  channel_id: '',
  page: 1,
  per_page: 10
}

async function getArticleList() {
  const res = await axios({
    url: '/v1_0/mp/articles',
    params: queryStr
  })

  document.querySelector('.table-body').innerHTML = res.data.results
    .map(
      (item) => `
       <tr class="article-item">
            <td><img src="${item.cover.images[0]}"></td>
            <td><span class="title">${item.title}</span></td>
            <td>
              <div class="status ${item.status == 1 ? 'status-primary' : 'status-success'}">${item.status == 1 ? '待审核' : '审核通过'}</div>
            </td>
            <td><span class="pubdate">${item.pubdate}</span></td>
            <td><span class="read_count">${item.read_count}</span></td>
            <td><span class="comment_count">${item.comment_count}</span></td>
            <td><span class="like_count">${item.like_count}</span></td>
            <td class="oper" data-id=${item.id}>
              <a class="edit"><i class="iconfont iconedit"></i></a>
               <a class="del"><i class="iconfont icondelete" class="del"></i></a>
            </td>
              </tr>
    `
    )
    .join('')

  total_count = res.data.total_count
  //  3页 共22页
  //  3页 共21页
  //  3页 共20页
  //当(3-1)页*10 == 20总数的时候，就要换页了
  if ((res.data.page - 1) * res.data.per_page >= res.data.total_count) {
    document.querySelector('.last').click()
  }
  document.querySelector('.currentPage').innerHTML = `第${res.data.page}页`
  document.querySelector('.total_count').innerHTML = `共${res.data.total_count}页`
}

getArticleList()

document.querySelector('.table-body').onclick = function (e) {
  if (e.target.parentNode.classList.contains('del')) {
    const id = e.target.parentNode.parentNode.dataset.id
    id && delbyId(id)
  } else if (e.target.parentNode.classList.contains('edit')) {
    const id = e.target.parentNode.parentNode.dataset.id
    id && edit(id)
  }
}

// 监听点击复选框事件
document.querySelector('.manage-status').onclick = (e) => {
  if (e.target.classList.contains('examine')) {
    // alert(e.target.value)
    queryStr.status = e.target.value
  }
}

document.querySelector('#channel').addEventListener('click', (e) => {
  queryStr.channel_id = e.target.value
})

document.querySelector('.btn').onclick = () => {
  console.log(queryStr)
  getArticleList()
}

//分页
document.querySelector('.last').onclick = () => {
  if (queryStr.page > 1) {
    queryStr.page--
    getArticleList()
  }
}

document.querySelector('.next').onclick = () => {
  if (queryStr.page < total_count / queryStr.per_page) {
    queryStr.page++
    getArticleList()
  }
}

function edit(id) {
  location.href = `../publish/publish.html?id=${id}`
}

async function delbyId(id) {
  try {
    console.log(id)
    const res = await axios({
      url: `/v1_0/mp/articles/${id}`,
      method: 'DELETE'
    })
    setTimeout(() => {
      alert('删除成功')
      getArticleList()
    }, 1000)
  } catch (error) {
    setTimeout(() => {
      alert(error.message)
    }, 1000)
  }
}
